<template>
  <div class="container">
    <div class="refund-head">
      <div class="font-15">{{afterSaleStatus}}</div>
      <div class="mar-t-10 font-12" v-if="showTime">{{showTime}}</div>
    </div>
    <div class="height-48 v-align-c pad-l-15 pad-r-15 font-12 bg-color-white" v-if="afterSaleStatus === '退款关闭'">
      <div v-if="refundData.afterSaleStatus === -2">因您确认收货，本次申请关闭</div>
      <div v-if="refundData.afterSaleStatus === 4 || refundData.afterSaleStatus === -3">账期结束，退款关闭</div>
    </div>
    <div class="refund-reason" v-if="afterSaleStatus === '退款失败'">
      <div class="flex font-12" v-if="refundData.afterSaleStatus === -1">
        <span>拒绝原因：</span>
        <span class="flex-item font-w">{{refundData.rejectReason}}</span>
      </div>      
      <div class="align-r" v-if="type !== 'seller'">
        <div class="reapply-btn" @click="linkToRefund">重新申请</div>
      </div>
    </div>
    <div class="refund-price mar-t-10">
      <div class="flex flex-between">
        <div class="v-align-c">
          <span>退款总金额<span v-if="deliveryType !== 3 && deliveryType !==4">(不含运费)</span></span>
          <van-icon v-if="deliveryType !== 3 && deliveryType !==4" class="mar-l-2" name="question-o" size="15px" @click="refundExplain" />
        </div>
        <div class="font-15">￥{{refundData.refundAmount}}</div>
      </div>
      <div class="flex flex-between">
        <div>退款方式</div>
        <div class="font-w font-14">{{afterSaleType[refundData.afterSaleType]}}</div>
      </div>
    </div>
    <div class="font-13 font-color-6 pad-t-12 pad-b-12 pad-l-15 pad-r-15 bg-color-white mar-t-10" v-if="refundData.receiveFullAddress && refundData.projectOrder.deliveryType !== 3 && refundData.projectOrder.deliveryType !==4">
      <div class="flex flex-between font-14 font-color">
        <span>退货地址</span>
        <div class="copy-btn" @click="$pt.setClipboardData({data: receiveDetails})">复制</div>
      </div>
      <div class="mar-t-9">
        <span>收件人：</span>
        <span>{{refundData.receiveName}}</span>
      </div>
      <div>
        <span>联系电话：</span>
        <span>{{refundData.receivePhone}}</span>
      </div>
      <div class="flex">
        <span>详细地址：</span>
        <span class="flex-item">{{refundData.receiveFullAddress}}</span>
      </div>
    </div>
    <div class="font-13 font-color-6 pad-t-12 pad-b-12 pad-l-15 pad-r-15 bg-color-white mar-t-10" v-if="deliveryType === 3 || deliveryType ===4">
      请将退款商品交给团长，否则无法退款成功
    </div>
    <!-- 填写退货物流单号展示，必须同时满足条件1和条件2 -->
    <!-- 条件1：申请类型：afterSaleType为10（退货退款） -->
    <!-- 条件2：售后转态：afterSaleStatus为1（待退货） -->
    <div
      v-if="refundData.afterSaleType === 10 && refundData.afterSaleStatus === 1"
      @click="refundExpressLayer = true"
      class="flex v-align-c bg-color-white mar-t-10 pad-l-15 pad-r-15 pad-t-12 pad-b-12">
      <img
        v-if="fileSpace"
        :src="fileSpace + '/images/icon-express-2.png'"
        class="width-37 height-37 mar-r-10"
        alt="">
      <div class="flex-item">
        <div class="font-14 font-w">我已寄出</div>
        <div class="font-13 font-color-6">填写物流单号</div>
      </div>
      <div class="btn-express-in font-color-6 font-13 height-28 flex flex-center">
        <div v-if="!refundData.trackingNo || !refundData.expressCode">填写单号</div>
        <div v-else>已填写</div>
      </div>
    </div>
    <div v-show="refundExpressLayer">
      <div        
        class="refund-express-layer">
        <h2 class="flex flex-center height-44 font-15 font-w">
          <div>退货物流</div>
        </h2>
        <div class="refund-express-con">
          <div class="flex v-align-c pad-t-8 pad-b-8">
            <span class="font-15">物流单号</span>
            <span class="express-red pad-l-2">*</span>
            <div class="flex-item pad-l-10">
              <input
                class="font-15 text-align-r"
                v-model="express.trackingNo"
                :disabled="refundData.trackingNo ? true : false"
                placeholder="请填写">
            </div>
          </div>
          <div class="flex v-align-c pad-t-8 pad-b-8">
            <span class="font-15">物流公司</span>
            <span class="express-red pad-l-2">*</span>
            <div class="flex-item v-align-c pad-l-10" @click="selectExpress" style="text-align: right;">
              <span class="flex-item" :class="enterpriseExpressName === '请选择' ? 'font-color-9' : '' ">
                {{enterpriseExpressName}}
              </span>
              <van-icon v-if="!refundData.trackingNo" name="arrow" size="14px" class="mar-l-5" color="#333333" />
            </div>
          </div>
          <div class="flex v-align-c pad-t-8 pad-b-8">
            <span class="font-15">联系电话</span>
            <span class="express-red pad-l-2">*</span>
            <div class="flex-item pad-l-10">
              <input
                class="font-15 text-align-r"
                maxlength="13"
                v-model="express.refundPhone"
                :disabled="refundData.trackingNo ? true : false"
                placeholder="请填写">
            </div>
          </div>
        </div>
        <div class="express-footer flex">
          <button
            v-if="refundData.trackingNo"
            @click="refundExpressLayer = false"
            class="cancel one-btn height-45 flex flex-center font-16"><div>关闭</div></button>
          <template v-else>
            <button
              @click="refundExpressLayer = false"
              class="cancel two-btn height-45 flex flex-center font-16"><div>取消</div></button>
            <button
              @click="saveRefundExpress"
              class="sure two-btn height-45 flex flex-center font-16"><div>确定</div></button>
          </template>
        </div>
      </div>
      <div class="refund-express-layer-bg"></div>
    </div>
    <van-popup
      :show="showSelect"
      round
      position="bottom"
      @close="onClose">
      <van-picker :columns="columns" @change="onChange" @confirm="onConfirm" @cancel="onCancel" show-toolbar />
    </van-popup>
    <div class="refund-info mar-t-10">
      <div class="pad-l-15 pad-t-20 pad-b-16 line-h-1 bg-color-white">退款信息</div>
      <div class="pad-l-15 pad-r-15 pad-t-10 pad-b-10 bg-color-fa" @click="linkToDetail" v-for="(item, index) of goods" :key=index>
        <div class="v-align-t">
          <div class="width-79 height-79">
            <img class="width-79 height-79 goodImg" v-if="item.goodsImageUrl" :src="item.goodsImageUrl" alt="">
          </div>
          <div class="line-2 mar-l-10 flex-item font-13">{{item.goodsTitle}}</div>
        </div>
        <div class="flex flex-between height-51 pad-l-10 pad-r-15 sku-row">
          <div class="font-12 font-color-6">
            <div class="flex sku-detail" v-if="item.skuDetail">
              <div>规格：</div>
              <div class="width-200 line-1">{{item.skuDetail}}</div>
            </div>
            <div>￥{{item.goodsPrice}}<span v-if="item.unit">/{{item.unit}}</span></div>
          </div>
          <div>×{{item.goodsNum}}</div>
        </div>
      </div>
      <div class="font-13 color-r flex flex-center pad-t-17 pad-b-17 border-b" @click="linkToDetail">
        <span>查看详情</span>
        <van-icon name="arrow" size="13px" color="#FF4E23" />
      </div>
    </div>
    <div class="order-info font-12">
      <div class="flex flex-between">
        <div>
          <span class="font-color-9">订单编号：</span>
          <span>{{refundData.orderNo}}</span>
        </div>
        <div class="copy-btn" @click="$pt.setClipboardData({data: refundData.orderNo})">复制</div>
      </div>
      <div>
        <span class="font-color-9">申请时间：</span>
        <span>{{refundData.createTime}}</span>
      </div>
      <div>
        <span class="font-color-9">退款数量：</span>
        <span>{{refundData.goodsNum}}</span>
      </div>
      <div>
        <span class="font-color-9">退款原因：</span>
        <span v-if="showRefundType">{{showRefundType}}</span>
      </div>
      <div class="flex">
        <span class="font-color-9">退款说明：</span>
        <span class="flex-item">{{refundData.customerRemark}}</span>
      </div>
      <div class="flex height-70">
        <span class="font-color-9">退款凭证：</span>
        <div class="flex-item refund-voucher">
          <img :src="item.imageUrl" class="width-84 height-70" alt="" v-for="(item, index) in refundData.imageList" :key="index">
        </div>
      </div>
    </div>
    <div class="height-71"></div>
    <div class="fixed-footer">
      <div class="flex-item pos-rel">
        <button open-type="contact" class="contactBtn hidden-submit button-icon"></button>
        <div class="flex flex-center">
          <img v-if="fileSpace" :src="fileSpace + '/images/customer-icon-2.png'" alt="" class="width-21 height-21 mar-r-6">
          <span class="font-16">联系客服</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-item" @click="$pt.makePhoneCall({phoneNumber: showStorePhone ? storePhone : phone})">
        <div class="flex flex-center">
          <img v-if="fileSpace" :src="fileSpace + '/images/customer-icon-3.png'" alt="" class="width-21 height-21 mar-r-6">
          <span class="font-16">拨打电话</span>
        </div>
      </div>
      <!-- <van-icon class="mar-t-3" name="phone" color="#333" size="16px" />
      <div class="font-16 font-w mar-l-4">联系卖家</div> -->
    </div>
  </div>
</template>
<script>
import {
  getRefundDetail,
  listAfterSaleReason,
  enterpriseExpressList,
  saveRefundExpress } from '@/api/personal'
export default {
  data() {
    return {
      sku: {},
      refundData: {},
      storePhone: '', // 店主电话
      showStorePhone: false, // 显示门店电话
      phone: '', // 团长电话
      afterSaleStatus: '',
      showTime: '',
      goods: {},
      status: {
        '0': '退款中',
        '1': '退款中',
        '2': '退款中',
        '3': '退款成功',
        '4': '退款关闭',
        '-1': '退款失败',
        '-2': '退款关闭',
        '-3': '退款关闭',
        '': '退款失败'
      },
      afterSaleType: {
        10: '退货退款',
        20: '仅退款',
        30: '仅退款'
      },
      refundType: {},
      showRefundType: '',
      afterSaleId: '',
      type: '',
      receiveDetails: '',
      deliveryType: '',
      refundExpressLayer: false,
      enterpriseExpressName: '请选择',
      express: {},
      expressList: [],
      showSelect: false,
      columns: []
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.refundExpressLayer = false
    this.express.refundPhone = this.getPhone
    this.type = this.getCurrentPage().query.type
    let sku = this.getCurrentPage().query.sku
    let afterSaleId = this.getCurrentPage().query.afterSaleId
    if (afterSaleId) {
      this.afterSaleId = afterSaleId
    } else {
      if (sku) {
        this.sku = JSON.parse(sku)
      }
    }
    this.enterpriseExpressList()
    this.getRefundDetail()
  },
  methods: {
    enterpriseExpressList() {
      this.columns = []
      enterpriseExpressList({
        expressStatus: 1
      }).then(response => {
        if (response.isError) return
        this.expressList = response.data
        this.expressList.forEach(item => {
          this.columns.push({
            text: item.expressName,
            enterpriseExpressId: item.enterpriseExpressId
          })
        })
      })
    },
    onClose() {
      // 关闭底部弹窗
    },
    onChange(e) {
      // 选择器变动
    },
    onCancel(e) {
      // 取消选择
      this.showSelect = false
    },
    onConfirm(e) {
      // 确认选择
      this.enterpriseExpressName = e.mp.detail.value.text
      this.express.enterpriseExpressId = e.mp.detail.value.enterpriseExpressId
      this.showSelect = false
    },
    selectExpress() {
      if (this.refundData.trackingNo) return
      this.showSelect = true
    },
    saveRefundExpress() {
      this.express.afterSaleId = this.afterSaleId || this.refundData.afterSaleId
      if (!this.express.trackingNo) {
        this.$utils.showToast({ title: '请填写物流单号!' })
        return
      }
      if (!this.enterpriseExpressName) {
        this.$utils.showToast({ title: '请选择物流公司!' })
        return
      }
      if (!this.express.trackingNo) {
        this.$utils.showToast({ title: '请填写联系电话!' })
        return
      }
      this.express.enterpriseExpressName = this.enterpriseExpressName
      console.log('this.express', this.express)
      saveRefundExpress(this.express).then(response => {
        if (response.isError) return
        this.getRefundDetail()
        this.refundExpressLayer = false
      })
    },
    getRefundDetail() {
      let params = {
        afterSaleId: this.afterSaleId || '',
        orderId: this.sku.orderId || '',
        goodsId: this.sku.goodsId || '',
        skuId: this.sku.skuId || ''
      }
      getRefundDetail(params).then(response => {
        if (response.isError) return
        this.refundData = response.data
        if (this.refundData.trackingNo) {
          this.express.trackingNo = this.refundData.trackingNo
        }
        if (this.refundData.expressName) {
          this.enterpriseExpressName = this.refundData.expressName
          this.express.enterpriseExpressName = this.enterpriseExpressName
        }
        if (this.refundData.refundPhone) {
          this.express.refundPhone = this.refundData.refundPhone
        }
        this.deliveryType = this.refundData.projectOrder.deliveryType
        let {projectOrder} = response.data
        if ('memberStore' in projectOrder) {
          this.showStorePhone = (projectOrder.memberStore.isHomeDelivery === 1 || projectOrder.memberStore.isStoreExtraction === 1)
          this.storePhone = projectOrder.memberStore.storePhone
        } else {
          this.showStorePhone = false
          if (projectOrder.shopMember) {
            this.phone = projectOrder.shopMember.phone
          }
        }
        this.receiveDetails = `收件人：${this.refundData.receiveName}\n联系电话：${this.refundData.receivePhone}\n详细地址：${this.refundData.receiveFullAddress}`
        this.goods = this.refundData.goodsList
        let afterSaleStatus = this.refundData.afterSaleStatus
        switch (afterSaleStatus) {
          case -1:
          case -2:
          case -3:
            this.showTime = this.$utils.formatTimeToMD(this.refundData.rejectTime, 'YMD')
            break
          case 0:
            this.showTime = this.$utils.formatTimeToMD(this.refundData.createTime, 'YMD')
            break
          case 1:
            this.showTime = this.$utils.formatTimeToMD(this.refundData.auditTime, 'YMD')
            break
          case 2:
            if (this.refundData.afterSaleType === 30) {
              this.showTime = this.$utils.formatTimeToMD(this.refundData.createTime, 'YMD')
            } else {
              this.showTime = this.$utils.formatTimeToMD(this.refundData.auditTime, 'YMD')
            }
            break
          case 3:
            this.showTime = this.$utils.formatTimeToMD(this.refundData.completedTime, 'YMD')
            break
          case 4:
            this.showTime = this.$utils.formatTimeToMD(this.refundData.closeTime, 'YMD')
            break
          default:
            break
        }
        this.afterSaleStatus = this.status[this.refundData.afterSaleStatus]
        console.log('pppopop')
        console.log(this.afterSaleStatus)
        this.listAfterSaleReason()
      })
    },
    listAfterSaleReason() {
      let params = {
        enterpriseId: this.refundData.enterpriseId || this.sku.enterpriseId
      }
      if (this.refundData.afterSaleType === 20) {
        params.refundMoneyFlag = 1
      } else if (this.afterSaleType === 10) {
        params.refundFlag = 1
      }
      listAfterSaleReason(params).then(response => {
        if (response.isError) return
        response.data.forEach(item => {
          this.refundType[item.reasonId] = item.cancelReason
        })
        this.showRefundType = this.refundType[this.refundData.afterSaleReasonId]
      })
    },
    linkToRefund() {
      // 跳转至退款申请页面
      let arr = []
      this.refundData.goodsList.forEach(item => {
        arr.push(item.orderGoodsId)
      })
      let orderGoodsIdStr = arr.join(',')
      this.$pt.navigateTo({ url: `/pages/personal/order/refund-view/main?orderGoodsId=${orderGoodsIdStr}&afterSaleId=${this.refundData.afterSaleId}&deliveryType=${this.deliveryType}&orderStatus=${this.refundData.projectOrder.orderStatus}` })
    },
    linkToDetail() {
      this.$pt.navigateTo({ url: '/pages/personal/order/detail/main?orderId=' + this.refundData.orderId + '&personalType=0&orderFrom=2' })
    },
    refundExplain() {
      this.$pt.showModal({
        title: '退款金额说明',
        content: '最终退款金额以卖家协商后为准',
        showCancel: false,
        confirmText: '朕知道了'
      })
    }
  }
}
</script>
<style lang="less" scoped>
.refund-express-layer{
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 30%;
  margin: -120px 13% 0 13%;
  width: 74%;
  z-index: 11;
  h2{
    background: #fffce9;
  }
  .refund-express-con{
    padding: 10px 14px 0 14px;
    min-height: 150px;
    box-sizing: border-box;
    .express-red{
      color: #FF3636;
    }
  }
  .express-footer{
    button{
      border-radius: 0;
      border: none;
      &:after{
        border-radius: 0;
        border: none;
      }
      &.one-btn{
        width: 100%;
      }
      &.two-btn{
        width: 50%;
      }
      &.cancel{
        background: #f5f5f5;        
        text-align: center;
      }
      &.sure{
        background: #7427ff;
        color: #ffffff;
        text-align: center;
      }
    }
  }
}
.refund-express-layer-bg{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.btn-express-in{
  border: #E9E9E9 1px solid;
  border-radius: 100px;
  padding: 0px 18px;
}
.contactBtn {
  background-color: transparent!important;
  position: absolute;
  width:100%;
  height:100%;
  left: 0;
  top: 0;
  z-index: 999;
  border-color: transparent!important;
  border: none!important;
}
.line-h-1{
  line-height: 1;
}
.refund-head{
  height: 100px;
  padding-left: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  background: #FF7200;
  color: white;
}
.bc-fail-color{
  background: #FF0000;
}
.refund-reason{
  height: 100px;
  overflow-y: scroll;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
}
.reapply-btn{
  width: 69px;
  height: 27px;
  box-sizing: border-box;
  color: #666;
  border-radius: 4px;
  border: 1px solid #999;
  text-align: center;
  line-height: 27px;
  font-size: 12px;
}
.refund-price{
  font-size: 12px;
  padding: 18px 15px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 81px;
  box-sizing: border-box;
  background: white;
}
.refund-info{
  .goodImg{
    border-radius: 5px;
  }
  .sku-row{
    border-radius: 4px;
    background: #F2F2F2;
    margin-top: 8px;
    .sku-detail{
      .line-1{
        line-height: unset;
      }
    }
  }
}
.order-info{
  padding: 12px 15px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  height: 267px;
  .refund-voucher{
    display: flex;
    justify-content: left;
    align-items: center;
  }
}
.fixed-footer{
  height: 54px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  background: white;
  .line{
    border-left: #eeeeee 1px solid;
    height: 30px;
  }
}
.copy-btn{
  width: 43px;
  height: 19px;
  text-align: center;
  line-height: 19px;
  border: 1px solid #CACACA;
  border-radius: 3px;
  font-size: 13px;
}
.bg-color-fa{
  background: #FAFAFA;
}
.color-r{
  color: #FF4E23;
}
</style>
